{% extends 'blog/base.html' %}

{% block title %}{{ post.title }} - 个人博客{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8">
        <!-- 文章内容 -->
        <article class="card">
            <div class="card-body">
                <h1 class="card-title">{{ post.title }}</h1>
                <div class="text-muted mb-3">
                    <i class="fas fa-user"></i> {{ post.author.username }} |
                    <i class="fas fa-calendar"></i> {{ post.published_at|date:"Y年m月d日" }} |
                    <i class="fas fa-eye"></i> {{ post.views }} 次浏览
                    {% if post.category %}
                    | <i class="fas fa-tag"></i> {{ post.category.name }}
                    {% endif %}
                </div>
                <hr>
                <div class="post-content">
                    {{ post.content|linebreaks }}
                </div>
            </div>
        </article>

        <!-- 相关文章 -->
        {% if related_posts %}
        <div class="card mt-4">
            <div class="card-header">
                <h5><i class="fas fa-bookmark"></i> 相关文章</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    {% for related_post in related_posts %}
                    <div class="col-md-4 mb-3">
                        <div class="card h-100">
                            <div class="card-body">
                                <h6 class="card-title">
                                    <a href="{{ related_post.get_absolute_url }}" class="text-decoration-none">
                                        {{ related_post.title }}
                                    </a>
                                </h6>
                                <small class="text-muted">
                                    {{ related_post.published_at|date:"Y-m-d" }}
                                </small>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}

        <!-- 评论区域 -->
        <div class="card mt-4">
            <div class="card-header">
                <h5><i class="fas fa-comments"></i> 评论 ({{ comments.count }})</h5>
            </div>
            <div class="card-body">
                <!-- 发表评论 -->
                {% if user.is_authenticated %}
                <form method="post" class="mb-4">
                    {% csrf_token %}
                    <div class="mb-3">
                        {{ comment_form.content }}
                    </div>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-paper-plane"></i> 发表评论
                    </button>
                </form>
                {% else %}
                <div class="alert alert-info">
                    <i class="fas fa-info-circle"></i> 
                    请 <a href="{% url 'admin:login' %}">登录</a> 后发表评论
                </div>
                {% endif %}

                <!-- 评论列表 -->
                {% if comments %}
                    {% for comment in comments %}
                    <div class="comment mb-3 p-3 border rounded">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <strong>{{ comment.author.username }}</strong>
                                <small class="text-muted ms-2">
                                    {{ comment.created_at|date:"Y-m-d H:i" }}
                                </small>
                            </div>
                        </div>
                        <div class="mt-2">
                            {{ comment.content|linebreaks }}
                        </div>
                    </div>
                    {% endfor %}
                {% else %}
                <div class="text-center text-muted py-3">
                    <i class="fas fa-comment-slash fa-2x mb-2"></i>
                    <p>暂无评论，快来抢沙发吧！</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- 侧边栏 -->
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-info-circle"></i> 文章信息</h5>
            </div>
            <div class="card-body">
                <p><strong>作者：</strong>{{ post.author.username }}</p>
                <p><strong>发布时间：</strong>{{ post.published_at|date:"Y年m月d日 H:i" }}</p>
                <p><strong>浏览次数：</strong>{{ post.views }}</p>
                {% if post.category %}
                <p><strong>分类：</strong>{{ post.category.name }}</p>
                {% endif %}
            </div>
        </div>

        {% if user.is_authenticated and user == post.author %}
        <div class="card mt-3">
            <div class="card-body">
                <h6>管理操作</h6>
                <a href="{% url 'blog:post_edit' post.slug %}" class="btn btn-outline-primary btn-sm">
                    <i class="fas fa-edit"></i> 编辑文章
                </a>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}
